import {
  ChangeDetectionStrategy,
  Component,
  DoCheck,
  ElementRef,
  NgZone,
  ViewChild,
  inject,
} from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-card-base',
  standalone: true,
  imports: [CommonModule],
  template: ` <p>card-base works!</p> `,
  styles: [``],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardBaseComponent implements DoCheck {
  @ViewChild('element', { static: true }) el!: ElementRef;

  ngZone = inject(NgZone);
  hostRef = inject(ElementRef);

  ngDoCheck(): void {
    this.ngZone.runOutsideAngular(() => {
      this.el.nativeElement.classList.add('border-red-600');
      setTimeout(() => {
        this.el.nativeElement.classList.remove('border-red-600');
      }, 1000);
    });
  }

  get touch() {
    this.ngZone.runOutsideAngular(() => {
      this.el.nativeElement.classList.remove('bg-white');
      this.el.nativeElement.classList.add('bg-amber-200');
      setTimeout(() => {
        this.el.nativeElement.classList.remove('bg-amber-200');
        this.el.nativeElement.classList.add('bg-white');
      }, 1000);
    });
    return null;
  }
}
